<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>在线音乐服务器</title>
    <link rel="shortcut icon" href="#" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style type="text/css">
        body {
            background-image: url('/images/bg-music.jpg');
            background-size: cover;  
            background-position: center; 
    color: #333;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

h3 {
    color: #77a0cc; /* 将标题颜色设为较亮的蓝色 */
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
}

.form-inline {
    margin-bottom: 20px;
}

.form-control {
    background-color: #3d3939;
    color: #333;
    border: 1px solid #c6bcbc;
    border-radius: 25px;
    padding: 10px 15px;
}

.form-control:focus {
    border-color: #0069d9;
    box-shadow: 0 0 5px rgba(38, 143, 255, 0.5);
}

.btn {
    background-color: #0069d9;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 25px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

.btn:focus {
    box-shadow: none;
}

.table {
    background-color: #262728; /* 使表格背景色稍微变暗 */
    color: #f8f1f1;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(238, 237, 237, 0.1);
    margin-top: 30px;
}

th, td {
    text-align: center;
    padding: 15px;
}

th {
    background-color: #dde6eb; /* 设置表格头部为深灰色 */
    font-weight: bold;
    color: #fff; /* 文字颜色设置为白色，确保对比度良好 */
}

tr {
    background-color: #373535; /* 设置每一行的背景色为浅灰色 */
}

tr:hover {
    background-color: #727e8a; /* 鼠标悬停时，背景色变深 */
}

#info {
    font-size: 1.1rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.container a {
    margin-right: 15px;
}

.form-inline input {
    border-radius: 25px;
}

.form-inline button {
    border-radius: 25px;
    margin-left: 10px;
}

#delete, #submit1 {
    margin-top: 10px;
}
    </style>

    <script type="text/javascript">
        $(function() {
            load(); // 页面加载时默认加载所有歌曲
        });

        function load(musicName) {
            $.ajax({
                url: "/music/findmusic",
                data: { musicName: musicName },
                type: "get",
                dataType: "json",
                success: function(result) {
                    var data = result.data;
                    var s = '';
                    for (var i = 0; i < data.length; i++) {
                        var musicUrl = data[i].url + ".mp3";
                        s += '<tr>';
                        s += '<th> <input id="' + data[i].id + '" type="checkbox"> </th>';
                        s += '<td>' + data[i].title + '</td>';
                        s += '<td>' + data[i].singer + '</td>';
                        s += '<td><button class="btn" onclick="playerSong(\'' + musicUrl + '\')">播放歌曲</button></td>';
                        s += '<td><button class="btn" onclick="deleteInfo(' + data[i].id + ')">删除</button>';
                        s += '<button class="btn" onclick="loveInfo(' + data[i].id + ')">喜欢</button></td>';
                        s += '</tr>';
                    }
                    $("#info").html(s);  // 更新表格
                }
            });
        }

        function playerSong(musicUrl) {
            var name = musicUrl.substring(musicUrl.lastIndexOf('/') + 1);  // 获取音乐名称
            SewisePlayer.toPlay(musicUrl, name, 0, true);  // 播放歌曲
        }

        function deleteInfo(musicId) {
            $.ajax({
                url: "/music/delete",
                data: { id: musicId },
                type: "post",
                dataType: "json",
                success: function(result) {
                    if (result.data) {
                        alert("删除成功");
                        window.location.href = "list.html";  // 页面跳转
                    } else {
                        alert("删除失败");
                    }
                }
            });
        }
        $(function(){
            $("#submit1").click( function(){
                var name = $("#exampleInputName2").val();
                load(name);
            });

            $.when(load).done(function(){
                $("#delete").click(function(){
                    var id = new Array();
                    var i = 0;//数组的小标
                    //
                    $("input:checkbox").each(function(){
                        //如果被选中,this代表发生事件的dom元素，<input>
                        if( $(this).is(":checked")) {
                            id[i] = $(this).attr("id");
                            i++;
                        }
                    });

                    console.log(id);

                    $.ajax({
                        url:"/music/deleteSel",
                        data:{"id":id},
                        dataType:"json",
                        type:"post",

                        success:function(obj){
                            if(obj.data == true) {
                                alert("删除成功！");
                                window.location.href = "list.html";
                            }else{
                                alert("删除失败！");
                            }
                        }
                    });
                });
            });
        });
        function loveInfo(musicId) {
            $.ajax({
                url: "lovemusic/addLikeMusic",
                data: { "id": musicId },
                type: "post",
                dataType: "json",
                success: function(result) {
                    if (result.data) {
                        alert("添加收藏成功");
                        window.location.href = "list.html";  // 页面跳转
                    } else {
                        alert("添加收藏失败");
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div class="container">
        <h3>在线音乐服务器实现</h3>
        <div style="float: left;">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2" class="sr-only">歌曲名</label>
                    <input name="name" type="text" class="form-control" id="exampleInputName2" placeholder="搜索歌曲...">
                </div>
                <button id="submit1" type="button" class="btn">查询</button>
            </form>
        </div>
        <div style="float: right; margin-bottom: 15px;">
            <a class="btn" href="loveMusic.html">喜欢列表</a>
            <a class="btn" href="upload.html">添加歌曲</a>
            <a id="delete" class="btn">删除选中</a>
        </div>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>歌名</th>
                    <th>歌手</th>
                    <th>歌曲</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="info">
                <!-- 动态内容加载 -->
            </tbody>
        </table>
    </div>

    <div style="width: 180px; height: 140px; position: absolute; bottom: 10px; right: 10px;">
        <script type="text/javascript" src="player/sewise.player.min.js"></script>
        <script type="text/javascript">
            SewisePlayer.setup({
                server: "vod",
                type: "mp3",
                videourl: "http://jackzhang1204.github.io/materials/where_did_time_go.mp3",
                skin: "vodWhite",
                autostart: "false",
            });
        </script>
    </div>
</body>
</html>
